import { _decorator, AudioClip, Component, Label, Node, math, AnimationClip, AnimCurve, Animation, animation, resources, Prefab, EventTouch, Button } from 'cc';
import { CVirtualList } from '../../core/component/CVirtualList';
import { CCircleList } from '../../core/component/CCircleList';
import { CLoopScroll } from '../../core/component/CLoopScroll';
import { UIBase } from '../../core/module/ui/UIBase';
import { SampleProxy } from '../../script/proxy/SampleProxy';
import { bind } from '../../core/module/proxy/ProxyDecorator';
import { audioMgr } from '../../core/module/audio/AudioMgr';
import CDropDown from '../../core/component/CDropDown';

const { ccclass, property } = _decorator;

@ccclass('Sample')
@bind(SampleProxy)
export class Sample extends UIBase<SampleProxy> {
  testNodes: Map<string, Node> = new Map<string, Node>();
  samples = [
    // 'pfScrape',
    // 'pfStepSlider',
    // 'pfRoundScroll',
    'pfLoopScroll',
    // 'pfRoundScrollToMid',
    // 'pfRichText',
    // 'pfJoystick',
    // 'pfRadar',
    'pfVirtualList',
    'pfCircleList',
  ]
  onInit(): void {
    this.samples.forEach(name => {
      this.testNodes.set(name, this.view.node.getChildByName(name))
    })
    const dropDown = this.view.node.getChildByName("pfDropDown").getComponent(CDropDown);
    dropDown.onItemCallback = this._onDropDownClick.bind(this);
    dropDown.setOptions(this.samples);
    this._onDropDownClick(0);
  }

  onShow(): void {

  }

  private _updateTestNodes(show: string, exclude: string = 'pfDropDown') {
    this.testNodes.forEach((node, key) => {
      if (key == show) {
        node.active = true;
      } else if (exclude && key == exclude) {
        node.active = true;
      } else {
        node.active = false;
      }
    });
  }

  private _updateLoopScroll() {
    const data = [];
    const num = Math.floor(Math.random() * 200)
    for (let i = 0; i <= num; i++) {
      data.push(i)
    }
    console.log('_updateLoopScroll:' + data.length);
    const loopScroll = this.testNodes.get('pfLoopScroll').getComponent(CLoopScroll)
    loopScroll.setUpdateItemCallback((item: Node, index: number, data: any) => {
      item.getComponentInChildren(Label).string = data
      item.off(Node.EventType.TOUCH_END)
      item.on(Node.EventType.TOUCH_END, (event: EventTouch) => {
      })
    })
    loopScroll.updateData(data)
  }

  private _updateVirtualList() {
    const data = [];
    const num = Math.floor(Math.random() * 200)
    for (let i = 0; i <= num; i++) {
      data.push(i)
    }
    console.log('_updateVirtualList:' + data.length);
    const virtualList = this.testNodes.get('pfVirtualList').getComponent(CVirtualList);
    virtualList.itemRender = (index: number, item: Node) => {
      item.getComponentInChildren(Label).string = data[index] + ''
      item.off(Node.EventType.TOUCH_END)
      item.on(Node.EventType.TOUCH_END, (event: EventTouch) => {
        virtualList.scrollToIndex(index);
        virtualList.scrollToCenterIndex(index, 0.2);
        console.log('****item touch end:' + index);
      })
      // item.off(Button.EventType.CLICK)
      // item.on(Button.EventType.CLICK, (event: EventTouch) => {
      //   console.log('click:' + index);
      //   virtualList.scrollToCenterIndex(index, 0.2);
      // })
    }
    virtualList.itemProvider = (index: number) => {
      return index % 2;
    }
    virtualList.updateData(data)
    virtualList.scrollToIndex(1, 0.5)
  }

  private _updateCircleList() {
    const data = [];
    const num = Math.floor(Math.random() * 200)
    for (let i = 0; i <= num; i++) {
      data.push(i)
    }
    console.log('_updateCircleList:' + data.length);
    const circleList = this.testNodes.get('pfCircleList').getComponent(CCircleList);
    circleList.itemRender = (index: number, item: Node) => {
      item.getComponentInChildren(Label).string = data[index] + ''
      item.off(Node.EventType.TOUCH_END)
      item.on(Node.EventType.TOUCH_END, (event: EventTouch) => {
        circleList.scrollToCenterIndex(index, 0.2)
      })
    }
    circleList.itemProvider = (index: number) => {
      return index % 2;
    }
    circleList.updateData([...data])
    circleList.scrollToIndex(20, 0.5)
  }

  private _onDropDownClick(index: number) {
    this._updateTestNodes(this.samples[index], 'pfDropDown');
    audioMgr.playSound('Audio/Click', 'common');
    if (this.samples[index] == 'pfLoopScroll') {
      this._updateLoopScroll();
      return
    }
    if (this.samples[index] == 'pfVirtualList') {
      this._updateVirtualList();
      return
    }
    if (this.samples[index] == 'pfCircleList') {
      this._updateCircleList();
      return
    }
  }
}




